<template>
  <div>
    <div>
      <el-card shadow="never">
        <!-- :model="numberValidateForm"  -->
        <el-form ref="numberValidateForm">
          <div class="sareach">
            <el-form-item prop="title">
              <!-- v-model="dynamicValidateForm.email" -->
              <el-input
                @keyup.enter="seek"
                style="width: 200px"
                placeholder="根据用户名搜索"
                v-model="requestParameters.title"
              ></el-input>
              <el-button
                @click="cleardata"
                size="small"
                type="primary"
                style="margin-left: 10px"
                >清除</el-button
              >
              <el-button size="small" type="primary" @click="seek">搜索</el-button>
              <el-button
                style="float: right"
                size="small"
                type="success"
                icon="el-icon-edit"
                @click="handleCreate"
                >新增权限组</el-button
              >
            </el-form-item>
          </div>
        </el-form>
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        >
        </el-alert>
        <el-table
        :data="dataList"
        :key="tableKey"
        :row-class-name="rowClassStatus"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
         >
         <el-table-column type="selection" width="300"></el-table-column>
          <el-table-column label="用户名" width="350"  >
             <template slot-scope="scope">
              <span>{{scope.row.title }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="create_date"  label="日期" :sort-method="changesort" sortable>
          </el-table-column> -->
          <el-table-column label="日期"  prop="create_date" :sort-method="changesort" sortable>
            <template slot-scope="scope">
              <span>{{scope.row.create_date | parseTimeByString("{y}-{m}-{d}")}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            align="center"
            :label="$t('table.actions')"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="handleUpdate(scope.row.id)"
                >{{ $t('table.edit') }}</el-button
              >
              <el-button
                v-if="scope.row.status != 'deleted'"
                size="mini"
                type="danger"
                @click="removeUser(scope.row.id)"
                >{{ $t('table.delete') }}</el-button
              >
            </template>
          </el-table-column> -->
    <el-table-column label="操作"  width="150" align="center">
      <template slot-scope="scope">
        <el-button
          plain
          size="medium"
          type="primary"
          icon="el-icon-edit"
          circle
          @click="handleEdit(scope.row.id)"></el-button>
        <el-button
          plain
          size="medium"
          type="danger"
         icon="el-icon-delete"
         circle
        @click="handleDelete( scope.row.id )"></el-button>
      </template>
    </el-table-column>
        </el-table>
         <div class="pagination"
                style="float: right"
         >
          <PageTool
            :paginationPage="requestParameters.page"
            :paginationPagesize="requestParameters.pagesize"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>
        <component
          v-bind:is="PermissionsAdd"
          ref="editPermission"
          :formBase.sync="requestParameters"
          :text="text"
          :pageTitle="pageTitle"
          :ruleInline="ruleInline"
          v-on:newDataes="handleLoadDataList"
          v-on:handleCloseModal="handleCloseModal"
        ></component>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/permissions.js'
import PageTool from '../components/page-tool.vue'
import PermissionsAdd from '../components/permissions-add.vue'
export default {
  components: {
    // permissionsApiAdd,
    PageTool,
    PermissionsAdd
  },
  data () {
    return {
      PermissionsAdd: 'PermissionsAdd',
      alertText: '',
      dataList: [],
      total: null,
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      ruleInline: {
        // 表单验证
        title: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
      }

    }
  },

  created () {
    // const { data } = await list(this.requestParameters)
    // this.dataList = data.list
    // this.total = data.counts
    // this.alertText = `共${this.total}条记录`
    // console.log(this.total)
    // const date = await simple()
    // console.log(date)
    this.getList()
  },

  methods: {
    async getList (params) {
      const { data } = await list(this.requestParameters)
      this.dataList = data.list
      this.total = data.counts
      this.alertText = `共${this.total}条记录`
      // console.log(this.total)
    },
    seek () {
      this.requestParameters.page = 1
      this.getList(this.requestParameters)
    },
    cleardata () {
      this.requestParameters.title = ''
    },
    changesort (a, b) {
      const oldTime = new Date(a.date).getTime() / 1000
      const newime = new Date(b.date).getTime() / 1000
      if (oldTime - newime > 0) {
        return true
      } else {
        return false
      }
    },
    handleEdit (objeditId) {
      this.text = '编辑'
      this.$refs.editPermission.dialogFormV()
      this.$refs.editPermission.hanldeEditForm(objeditId)
    },
    handleCreate () {
      this.text = '创建'
      this.$refs.editPermission.handleResetForm()
      this.$refs.editPermission.dialogFormV()
    },
    handleDelete (user) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          remove({ id: user })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.dataList.splice(user, 1)
              this.getList(this.requestParameters)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    }
  }
}
</script>

<style scoped lang="less"></style>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
  // text-align: right;
}
</style>
